<template>
  <div class="screen overview page-content">
    <screen-header :title="banner.name" :is-home="true"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6" class="ibox-group">
          <div class="ibox box1-1">
            <div class="ibox-header">
              <span class="ibox-title">今日任务情况</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-1">
                <div class="statistics-item">
                  <div class="val">
                    <animate-number v-if="taskData && taskData.todayTaskCount" from="0" :to="taskData.todayTaskCount"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name">中央运输</p>
                </div>
                <div class="statistics-item">
                  <div class="val">
                    <animate-number v-if="pageConfig && pageConfig['工程维护']" from="0" :to="pageConfig['工程维护']"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name">工程维护</p>
                </div>
                <div class="statistics-item">
                  <div class="val">
                    <animate-number v-if="pageConfig && pageConfig['就医服务']" from="0" :to="pageConfig['就医服务']"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name">就医服务</p>
                </div>
                <div class="statistics-item">
                  <div class="val">
                    <animate-number v-if="pageConfig && pageConfig['便民服务']" from="0" :to="pageConfig['便民服务']"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name">便民服务</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box1-2">
            <div class="ibox-header">
              <span class="ibox-title">任务效率</span>
            </div>
            <div class="ibox-body">
              <div class="lengeds">
                <span><i style="background-color: #52F1F7;"></i>平均响应时间（分钟）</span>
                <span><i style="background-color: #1C8FEA;"></i>平均用时（分钟）</span>
              </div>
              <div class="fx-box">
                <div class="fx-1">
                  <div id="over_chart1_21" class="chart"></div>
                  <p>中央运输任务</p>
                </div>
                <div class="fx-1">
                  <div id="over_chart1_22" class="chart"></div>
                  <p>工程维修任务</p>
                </div>
                <div class="fx-1">
                  <div id="over_chart1_23" class="chart"></div>
                  <p>就医服务任务</p>
                </div>
                <div class="fx-1">
                  <div id="over_chart1_24" class="chart"></div>
                  <p>便民服务订单</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box1-3">
            <div class="ibox-header">
              <span class="ibox-title">最新发布任务</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-table">
                <table>
                  <tr>
                    <th>名称</th>
                    <th>起始地</th>
                    <th>目的地</th>
                    <th>任务类型</th>
                    <th>发布时间</th>
                    <th>状态</th>
                  </tr>
                  <tr v-for="(item, index) in taskList" :key="index">
                    <td>{{ item.title || "--" }}</td>
                    <td>{{ item.sdepartName || "--" }}</td>
                    <td>{{ item.edepartName || "--" }}</td>
                    <td>{{ item.typeName || "--" }}</td>
                    <td>{{ item.addtime | date("HH:mm") }}</td>
                    <td><span>{{ item.status }}</span></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="box2-1 horizontal-overview">
            <div>
              <h4 class="num">
                <animate-number v-if="pageConfig && pageConfig['客户总数']" from="0" :to="pageConfig['客户总数']"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
              <p>客户总数</p>
            </div>
            <div>
              <h4 class="num">
                <animate-number v-if="pageConfig && pageConfig['服务医院总面积']" from="0" :to="pageConfig['服务医院总面积']"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
                <span style="font-size: 0.8vw;margin-left: -0.5vw;">㎡</span>
              </h4>
              <p>服务医院总面积</p>
            </div>
            <div>
              <h4 class="num">
                <animate-number v-if="pageConfig && pageConfig['服务人员总数']" from="0" :to="pageConfig['服务人员总数']"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
              <p>服务人员总数</p>
            </div>
            <div>
              <h4 class="num">
                <animate-number v-if="pageConfig && pageConfig['本月服务总次数']" from="0" :to="pageConfig['本月服务总次数']"
                  :duration="1000" easing="easeOutQuad"></animate-number>
                <span v-else>0</span>
              </h4>
              <p>本月服务总次数</p>
            </div>
          </div>
          <div class="ibox box2-2">
            <div class="animation-chart-2">
              <div class="sphere">
                <div class="sphere-bg"></div>
                <div class="sum">
                  <p class="name">总服务次数</p>
                  <div class="val">
                    <animate-number v-if="pageConfig && pageConfig['总服务次数']" from="0" :to="pageConfig['总服务次数']"
                      :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                </div>
              </div>
              <div class="cicle3"></div>
              <div class="cicle4"></div>
              <div class="cicle5"></div>
              <div class="cicle6"></div>
              <div class="cicle7"></div>
              <div class="cicle8">
                <span>{{ (pageConfig["响应率"] || 0) | number(0) }}<small>%</small></span>
                <p>响应率</p>
              </div>
              <div class="cicle9">
                <span>{{ (pageConfig["完成率"] || 0) | number(0) }}<small>%</small></span>
                <p>完成率</p>
              </div>
              <div class="cicle10">
                <span>{{ (pageConfig["优质率"] || 0) | number(0) }}<small>%</small></span>
                <p>优质率</p>
              </div>
              <div class="cicle11">
                <span>{{ (pageConfig["满意度"] || 0) | number(0) }}<small>%</small></span>
                <p>满意度</p>
              </div>
            </div>
            <canvas class="rain" id="rain"></canvas>
          </div>
          <div class="ibox bgh box2-3">
            <div class="ibox-header">
              <span class="ibox-title hover" @click="turnPage(3, 'Medical')">就医服务数据监测</span>
            </div>
            <div class="ibox-body">
              <div class="fx-box" style="height: 100%;padding-top:1vh;">
                <div class="fx-2" style="margin-right: 0.6vw;">
                  <div class="sbox">
                    <div class="sbox-title">陪诊服务</div>
                    <div class="sbox-body fx-box fx-column">
                      <div class="fx-2">
                        <div class="chart" id="over_chart2_3"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="fx-2" style="margin-right: 0.6vw;">
                  <div class="sbox">
                    <div class="sbox-title">陪检服务</div>
                    <div class="sbox-body fx-box fx-column">
                      <div class="fx-2">
                        <div class="chart" id="over_chart2_4"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="fx-2">
                  <div class="sbox">
                    <div class="sbox-title">陪护服务</div>
                    <div class="sbox-body fx-box fx-column">
                      <div class="fx-2">
                        <div class="chart" id="over_chart2_5"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box3-1">
            <div class="ibox-header">
              <span class="ibox-title hover" @click="turnPage(1, 'transport')">中央运输数据监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="over_chart3_1"></div>
            </div>
          </div>
          <div class="ibox box3-2">
            <div class="ibox-header">
              <span class="ibox-title hover" @click="turnPage(2, 'maintain')">工程维修数据监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="over_chart3_2"></div>
            </div>
          </div>
          <div class="ibox box3-3">
            <div class="ibox-header">
              <span class="ibox-title">便民服务数据监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="over_chart3_3"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      taskData: {},
      taskList: [],
      pageConfig: {},
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        setTimeout(this.initData, 200);
        this.timer = setInterval(this.initData, 10000);
      } else {
        clearInterval(this.timer);
      }
    }
  },
  mounted() {
    setTimeout(() => {
      charts.rainBg(".rain");
    });
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    turnPage(index, name) {
      this.$emit("change", index);
    },
    getTaskData() {
      this.taskData = {};
      this.https("get", "/api/Values/GetTaskCountData").then((res) => {
        this.taskData = res || {};
      });
    },
    getPageConfig() {
      this.pageConfig = {};
      this.https("get", "/api/Values/ReadData", { "classKey": "home_config" }).then((res) => {
        const data = res.values;
        if (data) {
          this.pageConfig = JSON.parse(data);
        } else {
          this.pageConfig = {};
        }

        this.getMedicalServiceData();
        this.getConvenientService();
        this.getTaskEfficiency();
        this.getRepairTaskCount();
      });
    },
    getMedicalServiceData() {
      let chart23Series0 = [{
        name: '',
        type: 'pie',
        radius: ['45%', '65%'],
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
        },
        startAngle: 0,
        label: {
          formatter: (params) => {
            return `{name|${params.name + " "}}\n{val|${params.value}}`
          },
          rich: {
            name: {
              fontSize: this.func.chartSize(13),
              lineHeight: this.func.chartSize(20),
              color: '#fff'
            },
            val: {
              fontSize: this.func.chartSize(14),
              lineHeight: this.func.chartSize(20),
              color: '#FDD214',

            }
          }
        },
        labelLayout: {
          align: "center",
        },
        labelLine: {
          lineStyle: {
            width: 1,
          }
        },
        tooltip: {
          show: false,
        },
        data: this.pageConfig["陪诊服务"].map((item, index) => {
          let colors = ["#149BED", "#FCAB32"];
          item.itemStyle = {
            color: {
              colorStops: [{
                offset: 0,
                color: colors[index],
              },
              {
                offset: 1,
                color: this.func.hexToRgba(colors[index], 0.8),
              },]
            }
          };
          return item;
        })
      }]
      let chart23Series1 = [{
        name: '',
        type: 'pie',
        radius: ['45%', '65%'],
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
        },
        startAngle: 0,
        label: {
          formatter: (params) => {
            return `{name|${params.name + " "}}\n{val|${params.value}}`
          },
          rich: {
            name: {
              fontSize: this.func.chartSize(13),
              lineHeight: this.func.chartSize(20),
              color: '#fff'
            },
            val: {
              fontSize: this.func.chartSize(14),
              lineHeight: this.func.chartSize(20),
              color: '#FDD214',

            }
          }
        },
        labelLayout: {
          align: "center",
        },
        labelLine: {
          lineStyle: {
            width: 1,
          }
        },
        tooltip: {
          show: false,
        },
        data: this.pageConfig["陪检服务"].map((item, index) => {
          let colors = ["#149BED", "#FCAB32"];
          item.itemStyle = {
            color: {
              colorStops: [{
                offset: 0,
                color: colors[index],
              },
              {
                offset: 1,
                color: this.func.hexToRgba(colors[index], 0.8),
              },]
            }
          };
          return item;
        })
      }]
      let chart23Series2 = [{
        name: '',
        type: 'pie',
        radius: ['45%', '65%'],
        center: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
        },
        startAngle: 0,
        label: {
          formatter: (params) => {
            return `{name|${params.name + " "}}\n{val|${params.value}}`
          },
          rich: {
            name: {
              fontSize: this.func.chartSize(13),
              lineHeight: this.func.chartSize(20),
              color: '#fff'
            },
            val: {
              fontSize: this.func.chartSize(14),
              lineHeight: this.func.chartSize(20),
              color: '#FDD214',
            }
          }
        },
        labelLayout: {
          align: "center",
        },
        labelLine: {
          lineStyle: {
            width: 1,
          }
        },
        tooltip: {
          show: false,
        },
        data: this.pageConfig["陪护服务"].map((item, index) => {
          let colors = ["#149BED", "#FCAB32"];
          item.itemStyle = {
            color: {
              colorStops: [{
                offset: 0,
                color: colors[index],
              },
              {
                offset: 1,
                color: this.func.hexToRgba(colors[index], 0.8),
              },]
            }
          };
          return item;
        })
      }]
      let sum0 = 0;
      chart23Series0[0].data.map(item => {
        sum0 += (Number(item.value) || 0);
      })
      let config0 = {
        title: {
          text: sum0,
          top: "48%",
          subtext: "七日任务总数",
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          subtextStyle: {
            fontSize: 12,
            color: "#fff",
            lineHeight: 0,
          },
        },
        legend: {
          orient: 'horizontal',
          top: 10,
          left: 'center',
        }
      }
      let sum1 = 0;
      chart23Series1[0].data.map(item => {
        sum1 += (Number(item.value) || 0);
      })
      let config1 = {
        title: {
          text: sum1,
          top: "48%",
          subtext: "七日任务总数",
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          subtextStyle: {
            fontSize: 12,
            color: "#fff",
            lineHeight: 0,
          },
        },
        legend: {
          orient: 'horizontal',
          top: 10,
          left: 'center',
        }
      }
      let sum2 = 0;
      chart23Series2[0].data.map(item => {
        sum2 += (Number(item.value) || 0);
      })
      let config2 = {
        title: {
          text: sum2,
          top: "48%",
          subtext: "七日任务总数",
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          subtextStyle: {
            fontSize: 12,
            color: "#fff",
            lineHeight: 0,
          },
        },
        legend: {
          orient: 'horizontal',
          top: 10,
          left: 'center',
        }
      }
      charts.pieChart("over_chart2_3", chart23Series0, config0)
      charts.pieChart("over_chart2_4", chart23Series1, config1)
      charts.pieChart("over_chart2_5", chart23Series2, config2)
    },
    getConvenientService() {
      let colors = ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0", "#3BA272", "#9A60B4", "#EA7CCC", "#91CC75", "#FC8452"];
      const chart33Series = this.pageConfig["便民服务数据监测"] || [];
      let chart33Len = 7;
      if (chart33Series.length > 0) {
        chart33Len = chart33Series[0].data.length;
      }
      let chart33Axis = [];
      for (let i = 1; i <= chart33Len; i++) {
        let nowDate = this.func.formatDate(new Date().getTime(), "yyyy-MM-dd");
        chart33Axis.push(this.func.formatDate(this.func.getNextDays(nowDate, i - chart33Len), "MM/dd"));
      }
      chart33Series.map((item, index) => {
        let config = {
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            width: this.func.chartSize(1.5),
            color: colors[index],
          },
          color: colors[index],
          areaStyle: {
            opacity: 0.2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colors[index],
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255,0)',
              }
            ])
          },
        }
        item = Object.assign(item, config);
      })
      charts.lineChart("over_chart3_3", chart33Axis, chart33Series);
    },
    getTaskList() {
      this.taskList = [];
      this.https("get", "/api/Values/ReadData", { "classKey": "home_task" }).then((res) => {
        const data = res.values;
        if (data) {
          this.taskList = JSON.parse(data);
        } else {
          this.taskList = [];
        }
        this.taskList.map((item, index) => {
          item.addtime = new Date().getTime() - ((index + 3) * (Math.floor(Math.random() * 2) + 1) * 1000 * 60);
        })
      });
    },
    getTransportTaskCount() {
      this.https("get", "/api/Values/GetTransportTaskCount").then((res) => {
        let data = res || {};
        let series = [{
          z: 10,
          name: '',
          type: 'pie',
          radius: ['20%', '60%'],
          center: ['60%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          label: {
            formatter: (params) => {
              return `{val|${params.value}}\n{name|${params.name}}`
            },
            rich: {
              name: {
                fontSize: this.func.chartSize(12),
                lineHeight: this.func.chartSize(12),
                color: '#1C8FEA'
              },
              val: {
                fontSize: this.func.chartSize(14),
                lineHeight: this.func.chartSize(20),
                color: '#DDF2FF'
              }
            }
          },
          labelLayout: {
            align: "center",
          },
          labelLine: {
            // show: false,
            lineStyle: {
              width: 0.5,
              type: "dashed",
            }
          },
          data: [
            { value: data.patientTransportTaskCount, name: '病员送检', itemStyle: { color: "#FA5D58" } },
            { value: data.docTransportTaskCount, name: '文书送检', itemStyle: { color: "#FDD214" } },
            { value: data.specimenTransportTaskCount, name: '标本送检', itemStyle: { color: "#9B73F0" } },
            { value: data.drugTransportTaskCount, name: '药品送检', itemStyle: { color: "#149BED" } },
            { value: data.materialsTransportTaskCount, name: '物资运输', itemStyle: { color: "#48D0E0" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['69%', '70%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "#004EE6" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['0%', '70%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['89%', '90%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "#004EE6" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['90%', '95%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        }]
        charts.pieChart("over_chart3_1", series)
      });
    },
    getRepairTaskCount() {
      let dataX = [], series = this.pageConfig["工程维修数据监测"] || [];
      let len = series[0].data.length || 7;
      for (let i = 1; i <= len; i++) {
        let nowDate = this.func.formatDate(new Date().getTime(), "yyyy-MM-dd");
        dataX.push(this.func.formatDate(this.func.getNextDays(nowDate, i - len), "MM/dd"));
      }
      charts.layerBlockChart("over_chart3_2", dataX, series);
    },
    getTaskEfficiency() {
      let data = this.pageConfig["任务效率"] || {};
      let seriesDatas = [{
        title: "中央运输任务",
        id: "over_chart1_21",
        data: [
          { name: "平均响应时间", value: data["中央运输任务"][0], color: "#52F1F7", unit: '分钟' },
          { name: "平均用时", value: data["中央运输任务"][1], color: "#1C8FEA", unit: '分钟' },
        ],
      }, {
        title: "工程维修任务",
        id: "over_chart1_22",
        data: [
          { name: "平均响应时间", value: data["工程维修任务"][0], color: "#52F1F7", unit: '分钟' },
          { name: "平均用时", value: data["工程维修任务"][1], color: "#1C8FEA", unit: '分钟' },
        ],
      }, {
        title: "就医服务任务",
        id: "over_chart1_23",
        data: [
          { name: "平均响应时间", value: data["就医服务任务"][0], color: "#52F1F7", unit: '分钟' },
          { name: "平均用时", value: data["就医服务任务"][1], color: "#1C8FEA", unit: '分钟' },
        ],
      }, {
        title: "便民服务订单",
        id: "over_chart1_24",
        data: [
          { name: "平均响应时间", value: data["便民服务订单"][0], color: "#52F1F7", unit: '分钟' },
          { name: "平均用时", value: data["便民服务订单"][1], color: "#1C8FEA", unit: '分钟' },
        ],
      }]
      seriesDatas.map(item => {
        var chart_count = 0;
        item.data.map(sItem => chart_count += sItem.value);
        charts.polycyclicChart(item.id, item.data[0].value, item.data, chart_count);
      })
    },
    initData() {
      this.getPageConfig();
      this.getTaskList();
      this.getTransportTaskCount();
      this.getTaskData();
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .statistics-table table td,
  .statistics-table table th {
    font-size: 1.28vh;
  }

  .box1-1 {
    height: 20.5vh;
  }

  .box1-2 {
    height: 26vh;

    .fx-box {
      display: flex;

      &>div {
        height: 100%;
        flex: 1;
        text-align: center;

        p {
          font-size: 0.72vw;
        }
      }

      .chart {
        height: 15vh;
      }
    }
  }

  .box1-3 {
    height: 39vh;
  }

  .box2-1 {
    height: 9vh;
    margin-bottom: 1vh;
  }

  .box2-2 {
    height: 50vh;
    background-color: transparent;
    border: none;
    background-image: none;
    background: none;
    margin-bottom: 1vh;
    background-color: rgba(40, 68, 249, 0.1);

    .des {
      display: flex;
      justify-content: space-between;
      position: absolute;
      padding: 0 1vw;
      width: 100%;
      left: 0;
      top: 2vh;
      color: #1C8FEA;

      .num {
        color: #52F1F7;
      }
    }
  }

  .box2-3 {
    height: 28.5vh;
  }

  .box3-1 {
    height: 28.5vh;
  }

  .box3-2 {
    height: 28.5vh;
  }

  .box3-3 {
    height: 28.5vh;
  }

  .rain {
    position: absolute;
    left: 0;
    top: 0;
  }

  .custom {
    display: flex;
    // flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .custom>div {
    flex: 1;
    text-align: center;

    .num {
      font-size: 2.2vh;
      font-weight: bold;
    }

    .tu {
      width: 70%;
      margin: 0 auto;
      color: #52F1F7;
      background-image: url("../assets/images/statistics-2-4.png");
      height: 9vh;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center bottom;

      &.chart {
        background: none;
        width: 100%;
      }
    }

    p {
      font-size: 0.68vw;
      white-space: nowrap;
    }
  }
}
</style>